<template>
  <div>
    <Header title="我的订单">
      <span slot="right">
        <i class="icon icon-white-del"></i>
      </span>
    </Header>
    <yd-tab font-size="0.37333333333333335rem" :height="`${90 / 75}rem`" active-color="#369eee" v-model="selIndex" :prevent-default="false" :item-click="itemClick">
      <yd-tab-panel v-for="(item,index) in items" :key="index" :label="item.label">
        <div class="order-item" v-for="(order,index) in list" :key="index">
          <div class="products">
            <div class="order-product"  v-for="(item,j) in order.products" :key="j">
              <div class="pic">
                <img v-lazy="item.pic" alt="">
              </div>
              <div class="prod-info">
                <div class="name">{{item.name}}</div>
                <div class="color">颜色分类:{{item.color}}</div>
                <div class="quantity">数量：1</div>
                <div class="price">￥{{item.price}}</div>
              </div>
            </div>
          </div>
          <div class="amount">
            合计：￥{{order.amount | price}} （含运费：￥{{order.freight | price}}）
          </div>
          <div class="control">
            <yd-button class="order-btn" type="danger">取消订单</yd-button>
            <yd-button class="order-btn" type="warning">朋友代付</yd-button>
            <yd-button class="order-btn">付款</yd-button>
          </div>
        </div>
      </yd-tab-panel>
    </yd-tab>
  </div>
</template>
<script>
export default {
  name: "OrderList",
  data() {
    return {
      selIndex: 0,
      items: [
        { label: "待付款", status: 0 },
        { label: "待发货", status: 1 },
        { label: "待收货", status: 2 },
        { label: "待评价", status: 3 }
      ],
      list: [
        {
          status: 0,
          amount: 1640,
          freight: 0,
          products: [
            {
              pic: require("../assets/img/order-list/product1.jpg"),
              name: "麦尔MEINL中东手鼓中东鼓HE-215 纯铜手工刻制花纹7寸非洲鼓",
              quantity: 1,
              color: "HE-114铝制雕花",
              price: 1640
            }
          ]
        },
        {
          status: 0,
          amount: 1640,
          freight: 0,
          products: [
            {
              pic: require("../assets/img/order-list/product1.jpg"),
              name: "麦尔MEINL中东手鼓中东鼓HE-215 纯铜手工刻制花纹7寸非洲鼓",
              quantity: 1,
              color: "HE-114铝制雕花",
              price: 1640
            }
          ]
        }
      ]
    };
  },
  computed: {
    status() {
      return this.items[this.selIndex].status;
    }
  },
  methods: {
    itemClick(key) {
      this.$dialog.loading.open("数据加载中");
      setTimeout(() => {
        this.selIndex = key;
        this.$dialog.loading.close();
        this.items[key].content =
          "新内容【key:" + key + "】新内容_" + new Date().getTime();
      }, 1000);
    }
  }
};
</script>

